<template>
    <div class="app-container">
        <!--<div class="item">-->
            <!--<h4>活跃度</h4>-->
            <!--<nx-data-display :option="option"></nx-data-display>-->
        <!--</div>-->
        <!--<div class="item">-->
            <!--<h4>昨日信息统计</h4>-->
            <!--<nx-data-tabs :options="easyDataOption"></nx-data-tabs>-->
        <!--</div>-->
        <fieldset class="layui-elem-field site-demo-button" v-if="loaded1&&($configSouye.targetFinished.show==null?false:$configSouye.targetFinished.show)">
            <legend>目标完成情况</legend>
            <div style="padding: 10px 10px 10px" action="">
                <el-row justify="center">
                    <el-col :span="8">
                        <div class="item-info" style="text-align:center">
                            <el-progress type="circle" :percentage="(targetFinishedPercent.outBoundNumber.outBoundNumber_/targetFinishedPercent.outBoundNumber.outBoundNumber*100).toFixed(2)" color="rgb(19, 206, 102)"></el-progress>
                            <div>
                                外呼数完成率（完成数：{{targetFinishedPercent.outBoundNumber.outBoundNumber_}}/{{targetFinishedPercent.outBoundNumber.outBoundNumber}}）（单位：次）
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="item-info" style="text-align:center">
                            <el-progress type="circle" :percentage="(targetFinishedPercent.outBoundTime.outBoundTime_/targetFinishedPercent.outBoundTime.outBoundTime*100).toFixed(2)" color="rgb(255, 73, 73)"></el-progress>
                            <div>
                                通话时长完成率（通话时长：{{targetFinishedPercent.outBoundTime.outBoundTime_}}/{{targetFinishedPercent.outBoundTime.outBoundTime}}）（单位：秒）
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="item-info" style="text-align:center">
                            <el-progress type="circle" :percentage="(targetFinishedPercent.signedMoney.signedMoney_/targetFinishedPercent.signedMoney.signedMoney*100).toFixed(2)" color="#8e71c7"></el-progress>
                            <div>
                                签约金额完成率（金额：{{targetFinishedPercent.signedMoney.signedMoney_}}/{{targetFinishedPercent.signedMoney.signedMoney}}）（单位：元）
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </fieldset>
        <fieldset class="layui-elem-field site-demo-button" v-if="loaded1&&($configSouye.todaySituation.show==false?true:$configSouye.todaySituation.show)">
            <legend>我的今日统计</legend>
            <div style="padding: 10px 10px 10px" action="">
                <div class="item">
                    <div>今日呼叫情况</div>
                    <nx-data-icons :option="todayCall"></nx-data-icons>
                </div>
                <div class="item">
                    <div>今日联系情况</div>
                    <nx-data-icons :option="todayContact"></nx-data-icons>
                </div>
                <div class="item">
                    <div>今日下订单情况</div>
                    <nx-data-icons :option="todayOrdered"></nx-data-icons>
                </div>
            </div>
        </fieldset>
        <el-card v-if="loaded1&&($configSouye.sellRange==null?false:$configSouye.sellRange.show)" style="margin: 10px 0px">
            <div slot="header" class="clearfix">
                <span style="font-size: 20px;font-weight: 300;">销售排行</span>
                <el-button-group  style="float: right">
                    <el-button :type="rangeClassify=='day'?'info':''" @click="switchRangeClassify('day')" size="mini">日</el-button>
                    <el-button :type="rangeClassify=='week'?'info':''" @click="switchRangeClassify('week')" size="mini">周</el-button>
                    <el-button :type="rangeClassify=='month'?'info':''" @click="switchRangeClassify('month')" size="mini">月</el-button>
                </el-button-group>
            </div>
            <div class="padding">
                <el-tabs type="border-card" @tab-click="tabChange">
                    <el-tab-pane label="部门排行榜">
                        <div style="margin-left: 10px;cursor: pointer">
                            <el-select v-model="bmphType" placeholder="排行方式" size="mini">
                                <el-option value="意向客户数"></el-option>
                                <el-option value="签约客户数"></el-option>
                                <el-option value="签约金额"></el-option>
                            </el-select>
                        </div>
                        <div style="padding: 10px 10px 10px" action="">
                            <table class="layui-hide" id="bmRangeList" lay-filter="bmRangeList"></table>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="个人排行榜">
                        <div style="margin-left: 10px;cursor: pointer">
                            <el-select v-model="grphType" placeholder="排行方式" size="mini">
                                <el-option value="意向客户数"></el-option>
                                <el-option value="签约客户数"></el-option>
                                <el-option value="签约金额"></el-option>
                                <el-option value="通话时长"></el-option>
                            </el-select>
                        </div>
                        <div style="padding: 10px 10px 10px" action="">
                            <table class="layui-hide" id="grRangeList" lay-filter="grRangeList"></table>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </el-card>
        <div action="" class="el-row">
            <el-card class="box-card el-col-11" v-if="loaded1&&($configSouye.notify.show==null?false:$configSouye.notify.show)">
                <div slot="header" class="clearfix">
                    <span style="font-size: 20px;font-weight: 300;">通知公告</span>
                    <el-button style="float: right; padding: 3px 0" type="text" @click="notifyMore()">更多...</el-button>
                </div>
                <div v-for="(o,index) in notify" :key="index" class="text item">
                    <div ><div style="font-weight: bold;float: left;margin-right: 5px">{{ o.title }}:</div>{{ o.brief }}</div>
                </div>
            </el-card>
            <el-card :class="{'box-card el-col-11 el-col-offset-2':$configSouye.notify.show,'box-card el-col-11':!$configSouye.notify.show}" v-if="loaded1&&$configSouye.todayNewAccount.show">
                <div slot="header" class="clearfix">
                    <span style="font-size: 20px;font-weight: 300;">今日新增意向客户</span>
                    <el-button style="float: right; padding: 3px 0" type="text" @click="todayAddIntentAccountMore()">更多...</el-button>
                </div>
                <el-table
                        :data="todayAddIntentAccount"
                        border
                        style="width: 100%">
                    <el-table-column
                            prop="khmc"
                            label="客户名称">
                    </el-table-column>
                    <el-table-column
                            prop="ldhm"
                            label="来电号码">
                    </el-table-column>
                    <el-table-column
                            prop="khxq"
                            label="客户需求">
                    </el-table-column>
                    <el-table-column
                            prop="zxcp"
                            label="质询产品">
                    </el-table-column>
                    <el-table-column
                            prop="ygmc"
                            label="归属员工">
                    </el-table-column>
                </el-table>
            </el-card>
        </div>
    </div>
</template>

<script>
    import nxDataDisplay from '@/components/nx-data/nx-data-display/nx-data-display'
    import nxDataCard from '@/components/nx-data/nx-data-card/nx-data-card'
    import nxDataTabs from '@/components/nx-data/nx-data-tabs/nx-data-tabs'
    import nxDataIcons from '@/components/nx-data/nx-data-icons/nx-data-icons'
    export default {
        name: 'workPlace',
        components: {
            nxDataDisplay,
            nxDataCard,
            nxDataTabs,
            nxDataIcons,
        },
        data() {
            return {
                rangeClassify:'day',
                // 今日呼叫情况
                todayCall: {},
                // 今日联系情况
                todayContact: {},
                // 今日下订单情况
                todayOrdered: {},
                //通知公告
                notify: [],
                //今日新增意向客户
                todayAddIntentAccount: [],
                //销售排行列表
                sellRangeList: [],
                //目标完成情况
                targetFinishedPercent: {
                    outBoundNumber:{
                        outBoundNumber_: 20,
                        outBoundNumber:'40/200次',
                    },
                    outBoundTime:{
                        outBoundTime_: 30,
                        outBoundTime:'1小时/4小时',
                    },
                    signedMoney:{
                        signedMoney_: 60,
                        signedMoney:'2000元/3000元',
                    }
                },
                //bmRangeList 部门销售排行
                bmRangeList:[],
                //grRangeList 个人销售排行
                grRangeList:[],
                loaded1:false,//配置是否加载完成
                grphType:'意向客户数',
                bmphType:'意向客户数',
                orderBy:'yxkhs',
            }

        },
        created: function(){
            this.$nextTick(function () {
                this.$post('basic-information-system-tj/today-data',
                    {
                        zuoxi:this.$cache_.getCookie('zuoxi'),
                    }
                )
                    .then((response) => {
                        this.todayCall = response.data.todayCall;
                        this.todayContact = response.data.todayContact;
                        this.todayOrdered = response.data.todayOrdered;
                        this.notify = response.data.notify;
                        this.todayAddIntentAccount = response.data.todayAddIntentAccount;
                        this.targetFinishedPercent = response.data.targetFinishedPercent;
                        console.log(this.targetFinishedPercent)
                        //查询首页的配置项是否显示
                        this.$configSouye = response.data.configSouye;
                        this.loaded1 = true;
                        if (this.$configSouye.sellRange.show||this.$configSouye.sellRange.show=='true'){//显示排行
                            this.rangeClassify = 'day';
                            this.searchBmRange();
                            this.searchGrRange();
                        }
                    }).catch((e) => {
                    consoleLog(e)
                });
            });
        },
        watch: {
            bmphType:function(){
                if (this.bmphType=='意向客户数'){
                    this.orderBy = 'yxkhs';
                    this.searchBmRange();
                }
                if (this.bmphType=='签约客户数'){
                    this.orderBy = 'qykhs';
                    this.searchBmRange();
                }
                if (this.bmphType=='签约金额'){
                    this.orderBy = 'qyje';
                    this.searchBmRange();
                }
            },
            grphType:function(){
                if (this.grphType=='意向客户数'){
                    this.orderBy = 'yxkhs';
                    this.searchGrRange();
                }
                if (this.grphType=='签约客户数'){
                    this.orderBy = 'qykhs'
                    this.searchGrRange();
                }
                if (this.grphType=='签约金额'){
                    this.orderBy = 'qyje'
                    this.searchGrRange();
                }
                if (this.grphType=='通话时长'){
                    this.orderBy = 'thsc'
                    this.searchGrRange();
                }
            },
        },
        mounted() {},
        computed: {},
        methods: {
            searchBmRange(){
                // 再次加载出表格数据（之前已经加载出来了dom数据）
                layui.use('table', ()=> {//加这个是防止刷新的时候会出现不存在render方法
                    layui.table.render({
                        elem: '#bmRangeList'
                        , url: burl + 'basic-information-system-tj/bm-range-list/' //数据接口
                        , method: 'post'
                        , where: {orderBy:this.orderBy,rangeClassify:this.rangeClassify}
                        , toolbar: ''
                        , title: ''
                        , height: 400
                        , totalRow: true
                        , cols: [[
                            {field: 'ph', title: '排行'}
                            , {field: 'bm', title: '部门'}
                            , {field: 'yxkhs', title: '意向客户数（次）', sort: true}
                            , {field: 'qykhs', title: '签约客户数（次）', sort: true}
                            , {field: 'qyje', title: '签约金额（元）', sort: true}
                        ]]
                        , page: true //开启分页
                    });
                });
            },
            searchGrRange(){
                layui.use('table', ()=> {//加这个是防止刷新的时候会出现不存在render方法
                    layui.table.render({
                        elem: '#grRangeList'
                        , url: burl + 'basic-information-system-tj/gr-range-list/' //数据接口
                        , method:'post'
                        , where:{orderBy:this.orderBy,rangeClassify:this.rangeClassify}
                        , toolbar: ''
                        , title: ''
                        , height: 400
                        , totalRow: true
                        , cols: [[
                            {field: 'ph',  title: '排行'}
                            , {field: 'ygxm',  title: '员工姓名'}
                            , {field: 'bm',  title: '部门'}
                            , {field: 'yxkhs',  title: '意向客户数（次）', sort: true}
                            , {field: 'qykhs',  title: '签约客户数（次）', sort: true}
                            , {field: 'qyje',  title: '签约金额（元）', sort: true}
                            , {field: 'thsc',  title: '通话时长（秒）', sort: true}
                        ]]
                        , page: true //开启分页
                    });
                });
            },
            tabChange(){
                setTimeout(()=>{
                    var myEvent = new Event('resize');
                    window.dispatchEvent(myEvent);
                },30)
            },
            switchRangeClassify(val) {//切换销售排行
                this.rangeClassify = val;
                this.searchBmRange();
                this.searchGrRange();
            },
            notifyMore() {//更多的 通知公告
                this.$router.push({ path: '/messageCenter/notify' })
            },
            todayAddIntentAccountMore() {//更多的 今天新增意图用户
                this.$router.push({ path: '/messageCenter/todayAddIntentAccount' })
            },
        }
    }
</script>

<style scoped>
    .item {
        margin-bottom: 16px;
    }
</style>
<style lang ="scss">
    @import '../../../../common/scss/data-card.scss';
    @import '../../../../common/scss/data-display.scss';
    @import '../../../../common/scss/data-icons.scss';
    @import '../../../../common/scss/data-tabs.scss';
    /*通知公告的样式*/
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }
</style>
